<html style="width: 100%; height: 100%;"
      class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths no-iosstatusbar appearance no-androidbrowser no-android44plus no-wechat no-devicem">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- 分享显示的标题-->
    <meta itemprop="name" content="宜鲜生商城" />

    <!-- 分享显示的缩略图-->
    <meta itemprop="image" content="/education/files/product.jpg" />

    <!-- 分享显示的简介-->
    <meta name="description" itemprop="description" content="宜鲜生，一个神奇的购物商城" />

    <title>宜鲜生</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/comp.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
    <script type="text/javascript" src="js/jquery.touchSlider.js"></script>
    <!--<script type="text/javascript" src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"/>-->
    <script type="text/javascript" src="js/vue.min.js"></script>
    <style type="text/css">
        .center {
            text-align: center;
        }
        .right {
            text-align: right;
        }
        .v-line {
            border-right:2px solid gray;
            padding-right:10px;
            padding-left:10px;
        }
        .img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
        .bottom-div {
            position: fixed;
            bottom: 0px;
            height: 35px;
            width: 100%;
        }
        .btn-buy{
            line-height: 35px;
            font-size: 20px;
            background: #1e9fff;
            border: none;
            color: #ffffff;
            width: 49%;
            border-radius: 0.2rem;
        }
    </style>
    <style class="cRJJjUj">
        .text-black.cRJJjUj {
            color: rgb(33, 33, 33)
        }

        .text-danger.cRJJjUj {
            color: rgb(255, 68, 0)
        }

        .thumbnail.cRJJjUj {
            margin-bottom: 0;
            padding: 8px 0
        }

        .tb-text-del.cRJJjUj {
            text-decoration: line-through
        }

        .tb-line.cRJJjUj {
            border-right: 1px solid rgb(209, 209, 209)
        }

        .tb-nopadding.cRJJjUj {
            padding-left: 0;
            padding-right: 0
        }

        .x-cards.cRJJjUj {
            padding-top: 0
        }

        .panel.panel-default.cRJJjUj {
            margin-bottom: 10px
        }

        .row.cRJJjUj {
            margin: 0
        }

        h4.cRJJjUj {
            margin-top: 0
        }

        .tb-img.cRJJjUj {
            width: 100%;
            height: 251px
        }

        .tb-trans.cRJJjUj .x-panel-top.cRJJjUj {
            z-index: 100
        }

        .tb-trans.cRJJjUj .x-panel-top.cRJJjUj .x-titlebar.cRJJjUj {
            background: none
        }

        .tb-trans.cRJJjUj .x-panel-content.cRJJjUj {
            top: 0 !important
        }

        .tb-trans.x-panel.cRJJjUj .no-iosstatusbar.cRJJjUj > .x-panel-content.cRJJjUj {
            top: -20px !important
        }

        .tb-box.cRJJjUj .tb-backBtn.cRJJjUj, .tb-box.cRJJjUj .tb-cartBtn.cRJJjUj, .tb-box.cRJJjUj .tb-moreBtn.cRJJjUj {
            width: 40px;
            height: 40px;
            border-radius: 65px;
            color: rgb(255, 255, 255);
            background-color: rgba(0, 0, 0, 0.4)
        }

        .tb-cartBtn.cRJJjUj {
            margin-top: -7px
        }

        .x-popOver-overlay.cRJJjUj {
            background-color: rgb(0, 0, 0)
        }

        .tb-tabs.cRJJjUj {
            padding-bottom: 10px;
            background-color: rgb(239, 239, 239)
        }

        .tb-tabs.cRJJjUj a.btn.cRJJjUj {
            color: rgb(102, 102, 102);
            background-color: rgb(255, 255, 255)
        }

        .tb-tabs.cRJJjUj .btn.active.cRJJjUj {
            border-bottom: 2px solid rgb(255, 68, 0);
            color: rgb(255, 68, 0)
        }

        .btn-icon-top.cRJJjUj span.cRJJjUj {
            font-size: 12px
        }

        .x-panel-bottom.cRJJjUj {
            border-top: 1px solid rgb(211, 211, 211);
            border-bottom: 1px solid rgb(211, 211, 211)
        }

        .x-panel-bottom.cRJJjUj .btn.cRJJjUj {
            color: rgb(102, 102, 102);
            padding: 3px 0 0 0
        }

        .x-panel-bottom.cRJJjUj .btn.cRJJjUj:nth-child(2) {
            border-left: 1px solid rgb(220, 220, 220);
            border-right: 1px solid rgb(220, 220, 220)
        }

        .tb-shopping.cRJJjUj .btn.cRJJjUj {
            height: 48px;
            font-size: 14px;
            margin: 0;
            padding: 0;
            border-radius: 0;
            box-shadow: none;
            border: none;
            background: none;
            color: rgb(255, 255, 255)
        }

        .tb-shopping.cRJJjUj .btn.cRJJjUj:first-child {
            background-color: rgb(254, 145, 0)
        }

        .tb-shopping.cRJJjUj .btn.cRJJjUj:last-child {
            background-color: rgb(253, 80, 1)
        }

        .x-popOver.cRJJjUj .x-popOver-overlay.cRJJjUj {
            background-color: rgb(0, 0, 0)
        }

        .x-popOver.cRJJjUj .x-popOver-content.cRJJjUj {
            width: 100%;
            background-color: rgb(255, 255, 255);
            bottom: 0 !important
        }

        .tb-colorImg.cRJJjUj {
            position: absolute;
            top: -20px;
            left: 10px;
            width: 110px;
            height: 120px
        }

        .tb-title.cRJJjUj {
            padding: 20px 0 0 130px
        }

        .tb-close.cRJJjUj {
            font-size: 30px
        }

        .tb-colorList.cRJJjUj .col.cRJJjUj {
            padding-left: 0;
            padding-right: 10px;
            margin-bottom: 10px
        }

        .tb-colorList.cRJJjUj .col.cRJJjUj div.cRJJjUj {
            line-height: 30px;
            background-color: rgb(239, 239, 239);
            border-radius: 5px
        }

        .tb-colorList.cRJJjUj .col.cRJJjUj div.current.cRJJjUj {
            background-color: rgb(255, 68, 0);
            color: rgb(255, 255, 255)
        }

        .tb-colorOk.cRJJjUj {
            background-color: rgb(255, 68, 0);
            color: rgb(255, 255, 255);
            border-radius: 0
        }
    </style>
</head>

<body style="width:100%;height:100%;margin: 0;">

<div id="applicationHost" class="applicationHost" style="width:100%;height:100%;">
    <div class="window cF7JvUn">
        <div class="x-contents x-full cF7JvUn">
            <div class="x-contents-content cF7JvUn active">
                <div class="cF7JvUn">
                    <div class="main13 cRJJjUj">
                        <!--<div class="x-panel x-full x-card tb-trans x-has-iosstatu cRJJjUj">-->
                        <div style="margin-top: 5px;">
                            <div class="x-panel-content x-cards tb-trans cRJJjUj">
                                <!-- tupian  -->
                                <div class="x-carousel carousel cRJJjUj" xid="carousel1" style="height:251px;">
                                    <div class="x-contents carousel-inner cRJJjUj slidable">
                                        <div class="main_visual x-contents-content active cRJJjUj">
                                            <div class="flicking_con">
                                                <a href="#" v-for="(img, index) in data.product.product_images">
                                                    {{index+1}}</a>
                                            </div>
                                            <div class="main_image">
                                                <ul>
                                                    <li v-for="(img, index) in data.product.product_images">
                                                        <img :src="'/education' + img.url" />
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--<div class="flicking_con">
                                                <a href="#">1</a>
                                                <a href="#">2</a>
                                                <a href="#">3</a>
                                            </div>
                                            <div class="main_image">
                                                <ul>
                                                    <li><img src='images/img_main_1.jpg'></li>
                                                    <li><img src='images/img_main_2.jpg'></li>
                                                    <li><img src='images/img_main_3.jpg'></li>
                                                </ul>
                                                <a href="javascript:;" id="btn_prev"></a>
                                                <a href="javascript:;" id="btn_next"></a>
                                            </div>-->
                                        </div>

                                    </div>
                                </div>
<!-- 产品名称及价格 -->
                                <div class="panel panel-default x-card panel-body cRJJjUj">
                                    <div component="$model/UI2/system/components/bootstrap/row/row"
                                         class="row tb-nopadding cRJJjUj">
                                        <div class="col col-xs-12  tb-nopadding cRJJjUj center" xid="col8"
                                             __cid="cRJJjUj">
                                            <h4 xid="h41" class="text-black cRJJjUj" >
                                                <div v-html="data.product.product_name"></div>
                                            </h4>
                                            <div xid="div4" __cid="cRJJjUj" class="cRJJjUj">
                                                <div class="col col-xs-4"></div>
                                                <div class="col col-xs-4">
                                                    <span xid="span17" class="text-danger h3 cRJJjUj"
                                                          __cid="cRJJjUj">￥</span>
                                                    <span xid="span29" class="text-danger h3 cRJJjUj">
                                                        <span
                                                                v-html="data.product.activity.price || data.product.price"/>
                                                    </span>
                                                </div>
                                                <div class="col col-xs-4">
                                                <span xid="span29" class="text-danger h5 cRJJjUj"
                                                      v-if="data.product.activity.price">
                                                    倒计时:
                                                    <span id="_d">0天 0时 0分 0秒</span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div xid="div5" class="text-muted cRJJjUj center" __cid="cRJJjUj"
                                             v-if="data.product.activity.price">
                                            <span xid="span19" __cid="cRJJjUj" class="cRJJjUj">原价：</span>
                                            <span xid="span18" class="tb-text-del cRJJjUj" __cid="cRJJjUj">￥</span>
                                            <span xid="span13" class="tb-text-del cRJJjUj" __cid="cRJJjUj">
                                                <span v-html="data.product.price" />
                                            </span>
                                        </div>
                                    </div>
                                </div>
<!-- 产地、规格、保质期-->
                                <div class="panel panel-default x-card panel-body cRJJjUj">
                                    <div component="$model/UI2/system/components/bootstrap/row/row"
                                         class="row tb-nopadding cRJJjUj">
                                        <div class="col col-xs-6 tb-nopadding cRJJjUj center v-line" xid="col8">
                                            <div xid="h41" class=" text-black cRJJjUj">
                                                产地
                                            </div>
                                            <div xid="h41" class=" text-black cRJJjUj">
                                                <span v-html="data.product.place_origin"/>
                                            </div>
                                        </div>

                                        <div class="col col-xs-6 tb-nopadding cRJJjUj center" xid="col8" >
                                            <div xid="h41" class=" text-black cRJJjUj">
                                                规格
                                            </div>
                                            <div xid="h41" class=" text-black cRJJjUj">
                                                <span v-html="data.product.spec_desc"/>
                                            </div>
                                        </div>
                                        <!--<div class="col col-xs-4 tb-nopadding cRJJjUj center" xid="col8" >
                                            <div xid="h41" class=" text-black cRJJjUj">
                                                保质期
                                            </div>
                                            <div xid="h41" class=" text-black cRJJjUj">
                                                <span v-html="data.product.valid_date"/>
                                            </div>
                                        </div>-->
                                    </div>
                                </div>

                                <!-- 商品评价 -->
                                <div class="panel panel-default x-card panel-body cRJJjUj">
                                    <div component="$model/UI2/system/components/bootstrap/row/row"
                                         class="row tb-nopadding cRJJjUj">
                                        <div class="col col-xs-7 tb-nopadding cRJJjUj " xid="col8">
                                            <div xid="h41" class=" text-black cRJJjUj">
                                                商品评价（{{data.comments}}）
                                            </div>
                                        </div>

                                        <div class="col col-xs-5 tb-nopadding cRJJjUj" xid="col8" >
                                            <div xid="h41" class=" text-black cRJJjUj right">
                                                好评率 {{data.praise_rate}}
                                            </div>
                                        </div>
                                    </div>
                                </div>

<!-- 图片详情 -->
                                <div class="panel x-card cRJJjUj">
                                    <div class="btn-group btn-group-justified tb-tabs cRJJjUj tabbed">
                                        <a class="btn btn-link btn-only-label cRJJjUj active" id="imgA">
                                            <i class="cRJJjUj"></i>
                                            <span class="cRJJjUj">图文详情</span>
                                        </a>
                                        <!--<a class="btn btn-link btn-only-label cRJJjUj " id="paramA">
                                            <i class="cRJJjUj"></i>
                                            <span class="cRJJjUj">产品参数</span>
                                        </a>-->
                                    </div>
                                    <div class="x-contents cRJJjUj" style="margin-bottom: 35px">
                                        <!-- class x-content-on-left -->
                                        <div class="x-contents-content panel-body cRJJjUj  active"
                                             id="imgDiv">
                                            <div class="x-list x-cards cRJJjUj" id="description"
                                                 v-html="data.product.description">
                                            </div>
                                            <div class="x-cards cRJJjUj center    　　　　　　　　　　　　　　　　　　　　　"
                                                 v-for="image in data.product.detail_images">
                                                <img :src="'/education'+image.url" class="img"/>
                                            </div>
                                        </div>
                                       <!-- <div class="x-contents-content panel-body cRJJjUj " id="paramDiv">
                                        </div>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-div">
            <span>
                <input type="button" id="btnDown" class="btn-buy" value="下载">
            </span>
            <span>
                <input type="button" id="btnBuy" class="btn-buy" value="立即购买" style="margin-left: 1%">
            </span>
        </div>
    </div>
</div>

<script type="text/javascript">
    var jsonData =  {
        praise_rate: "0%", product: {
            product_name:'',
            place_origin:'',
            spec_desc:'',
            valid_date:'',
            activity: {
                price:0,
                time_end:'2019-05-24'
            }
        }, comments: 0,
        comment: {}
    };
    var vm = new Vue({
        el: '#applicationHost',
        data: {
            data: jsonData
        },
        updated: function () {
            this.$nextTick(function () {
                // Code that will run only after the
                // entire view has been re-rendered
                initC();
            })
        }
    });
    $(function(){
/*        $('#imgA').add($('#paramA')).click(function(){
            $('#imgA').toggleClass('active');
            $('#imgDiv').toggleClass('active');
            $('#paramA').toggleClass('active');
            $('#paramDiv').toggleClass('active');
        });*/

        var ids = getQueryString('ids');//4ea7db1ddd1c454db3086667e93e0ae6
        if(!ids){
            alert('未选择产品');
            return;
        }

        $.post('/education/api/product/view/' + ids,function(rs){
            if(rs.code == 200){
                //结构:{praise_rate: "70%", product: Object, comments: 2, comment: Object}
                vm.data = rs.data;
                var ac = rs.data.product.activity.time_end;
                if(ac){
                    countTime(ac);
                }
            }
        });

        $('#btnBuy').click(function () {
            window.location.href = 'yixiansheng://' + ids;
//            startApp(ids);
        });
        $('#btnDown').click(function () {
            location.href = '../download/index.html';
        });
    });

    /*
     获取地址栏传过来的参数
     */
    function getQueryString(name) {
        var svalue = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]*)(\&?)", "i"));
        if (svalue != null) {
            return decodeURI(svalue ? svalue[1] : svalue);
        }
        return null;
    }

var $dragBln = false;
    function initC(){
        $(".main_visual").hover(function(){
            $("#btn_prev,#btn_next").fadeIn()
        },function(){
            $("#btn_prev,#btn_next").fadeOut()
        });

        $dragBln = false;

        $(".main_image").touchSlider({
            flexible : true,
            speed : 200,
            btn_prev : $("#btn_prev"),
            btn_next : $("#btn_next"),
            paging : $(".flicking_con a"),
            counter : function (e){
                $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
            }
        });

        $(".main_image").bind("mousedown", function() {
            $dragBln = false;
        });

        $(".main_image").bind("dragstart", function() {
            $dragBln = true;
        });

        $(".main_image a").click(function(){
            if($dragBln) {
                return false;
            }
        });

        /*timer = setInterval(function(){
         $("#btn_next").click();
         }, 5000);

         $(".main_visual").hover(function(){
         clearInterval(timer);
         },function(){
         timer = setInterval(function(){
         $("#btn_next").click();
         },5000);
         });*/

        $(".main_image").bind("touchstart",function(){
            clearInterval(timer);
        }).bind("touchend", function(){
            timer = setInterval(function(){
                $("#btn_next").click();
            }, 5000);
        });
    }

    /**
     *设置时间戳，进行倒计时
     */
    function countTime(dataStr) {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
     //   var str = "2018/3/17 00:00:00";
        var endDate = new Date(dataStr);
        var end = endDate.getTime();
        //时间差
        var leftTime = end - now;
        //定义变量 d,h,m,s保存倒计时的时间
        var d, h, m, s;
        if (leftTime >= 0) {
            d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
            h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
            m = Math.floor(leftTime / 1000 / 60 % 60);
            s = Math.floor(leftTime / 1000 % 60);
        }
        //将0-9的数字前面加上0，例1变为01
        d = checkTime(d);
        h = checkTime(h);
        m = checkTime(m);
        s = checkTime(s);

        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }

        //将倒计时赋值到div中
        var str = d > 0 ? d + '天' : h + "时" + m + "分" + s + "秒";
        if(document.getElementById("_d")){
            document.getElementById("_d").innerHTML = str;
        }
/*        document.getElementById("_h").innerHTML = h + "时";
        document.getElementById("_m").innerHTML = m + "分";
        document.getElementById("_s").innerHTML = s + "秒";*/
        //递归每秒调用countTime方法，显示动态时间效果
        setTimeout(countTime, 1000, dataStr);
    }


    window.startApp = function(id){     //启动APP
        if(publicFun.isInWx()){     //微信中
            alert("请在浏览器中打开");
        }else{      //非微信中
            if(publicFun.isInIos()){　　　　//IOS系统，直接去itunes中，既可以下载也可以打开
                window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
            }else{      //android系统，通过定时器的方式，判断是否安装有APP
                var hasApp = true , t = 1000;
                setTimeout(function () {  //没有安装APP则跳转至应用宝下载，延时时间设置为2秒
                    if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
                } , 2000);
                var t1 = Date.now();
                window.location.href = "yixiansheng://" + id;
                setTimeout(function () {    //t的时间就是出发APP启动的时间，若APP启动了，再次返回页面时t2这行代码执行，hasApp即为true。反之若APP没有启动即为false
                    var t2 = Date.now();
                    hasApp = !(!t1 || t2 - t1 < t + 150);
                } , t);
            }
        }
    }

    var publicFun = function() {
        var isInIos = function() {
            var userAgentInfo = navigator.userAgent,
                Agents = ["iPhone", "iPad", "iPod"];
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    return true;
                }
            }
            return false;
        };
        var isInWx = function(){
            var agent = window.navigator.userAgent.toLowerCase();
            return agent.match(/MicroMessenger/i) == 'micromessenger';
        };

        return {
            isInIos: isInIos,
            isInWx: isInWx
        };
    }()


</script>
</body>
</html>